<template>
  <view class="settings-page">
    <uni-list class="settings-list">
      <!-- 账户设置 -->
      <uni-list-item title="账户与安全" showArrow @click="navigateToAccount" />

      <!-- 通知设置 -->
      <uni-list-item>
        <template v-slot:header>
          <text class="list-title">消息通知</text>
        </template>
        <template v-slot:footer>
          <switch :checked="notifyEnabled" @change="toggleNotify" />
        </template>
      </uni-list-item>

      <!-- 隐私设置 -->
      <uni-list-item title="隐私设置" showArrow @click="navigateToPrivacy" />

      <!-- 清除缓存 -->
      <uni-list-item title="清除缓存" :note="cacheSize" @click="clearCache" />

      <!-- 退出登录 -->
      <uni-list-item title="退出登录" clickable @click="handleLogout" />
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      notifyEnabled: true,
      cacheSize: '153MB'
    }
  },
  methods: {
    navigateToAccount() {
      uni.navigateTo({ url: '/pages/settings/account' })
    },
    navigateToPrivacy() {
      uni.navigateTo({ url: '/pages/settings/privacy' })
    },
    toggleNotify(e) {
      this.notifyEnabled = e.detail.value
      // 这里调用通知设置接口
    },
    clearCache() {
      uni.showModal({
        title: '提示',
        content: '确定要清除所有缓存吗？',
        success: () => {
          this.cacheSize = '0MB'
          uni.showToast({ title: '缓存已清除' })
        }
      })
    },
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 这里执行退出登录逻辑
            uni.reLaunch({ url: '/pages/login/login' })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.settings-page {
  padding: 30upx;
  min-height: 100vh;
  background: #f5f5f5;

  .settings-list {
    border-radius: 20upx;
    overflow: hidden;

    .list-title {
      font-size: 32upx;
      color: #333;
    }
  }

  // 退出登录特殊样式
  .uni-list-item:last-child {
    .uni-list-item__container {
      justify-content: center;
      .uni-list-item__content-title {
        color: #f56c6c;
        font-weight: bold;
      }
    }
  }
}
</style>
